<!doctype html>
<html>
<head>
  <title>Blip</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    margin: 0;
    padding: 0;
  }
  .blipchart {
    background: #fff;
    display: block;
  }
  .legend {
    text-align: right;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    font-family: Arial;
  }
  .legend span {
    padding-left: 2em;
  }
  .dnslegend form {
    display: inline;
  }
  .dnslegend form label {
    margin: -2em;
    padding: 2em;
    font-weight: bold;
  }
  .dnslegend form label:hover {
    background: #ff8;
  }
  </style>
</head>
<body>
<div class='legend'>
  <a href='https://github.com/apenwarr/blip'>What's this?</a>
  <span id='locallegend'></span>
  <span id='internetlegend'></span>
  <span class='dnslegend'>
    <form>
      <label for="wantdns">
      <input type='checkbox' name='wantdns' id='wantdns'>
      DNS
      </label>
    </form>
  </span>
</div>
<canvas class='blipchart' id='hires'></canvas>
<canvas class='blipchart' id='lores'></canvas>
<canvas class='blipchart' id='vlores'></canvas>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='blip.js'></script>
<script>

var fixSize = function() {
  var hmain = window.innerHeight - $('.legend')[0].clientHeight;
  var h1 = Math.round(hmain * 0.05);
  $('#hires').width(window.innerWidth).height(hmain - 3 * h1);
  $('#lores').width(window.innerWidth).height(h1 * 2);
  $('#vlores').width(window.innerWidth).height(h1);
}

$('#locallegend').css('color', localColor);
$('#internetlegend').css('color', internetColor);
$('.dnslegend').css('color', dnsColor);

$(window).resize(fixSize).ready(fixSize);
$('.blipchart').click(toggleBlip);
$('#wantdns').change(toggleDns);

start();

</script>
</body>
</html>
